<template>
	<view class="box">
		<view class="head_tlt">
			<view class="tlt_blank"><text>欢迎注册</text></view>
			<view class="tlt_gray"><text>分享不间断，收益无极限</text></view>
		</view>
		<view class="register_box">
			<view class="inp">
				<input class="pass my-mgt-15 my-pdl-15" placeholder-class="my-cl-grey my-font-14" type="text"
					placeholder="请输入手机号" v-model="phone" />
				<view class="inp_idcode_box">
					<input class="code my-mgt-15 my-pdl-15" placeholder-class="my-cl-grey my-font-14" type="text"
						placeholder="请输入短信验证码" v-model="msgCode" />
					<view class="codeBtn">
						<view v-if="anew">{{countDownNum}}s后重新获取</view>
						<view v-else @click="getCode">获取验证码</view>
					</view>
				</view>
				<input class="pass my-mgt-15 my-pdl-15" placeholder-class="my-cl-grey my-font-14" type="text"
					placeholder="请输入邀请码" v-model="inviteCode" />
				<input class="name my-mgt-15 my-pdl-15" placeholder-class="my-cl-grey my-font-14" type="text"
					placeholder="请设置登录密码" v-model="password" />
			</view>
			<view class="register-btn">
				<button class="btn" type="default" @click="goRegister">注册</button>
			</view>
			<!-- <view class="txt_login">已有账号，<text class="col" @click="goLogin">立即登录</text></view> -->
			<view class="radio-btn my-flex-col-c">
				<view class="my-flex-row-align-c">
					<radio class="tr" color="#F05329" @click="changeRadio" style="transform: scale(0.7);"
						:checked="checked" />
					<div @click="showAgree()" ><text class="my-cl-ye my-mgl-8 my-font-15">我已阅读并同意<text class="my-cl-or" >《用户协议》</text></text></div>
				</view>
			</view>
		</view>
		<u-popup v-model="QSPopup" mode="center">
			<view class="codebox">
				<view class="tlt my-mgb-10">请输入图形验证码</view>
				<view class="image-code">
					<input type="text" v-model="verifyCode" class="input" placeholder="输入图片中的图形" />
					<view class="img" @click="getVCode">
						<image :src="imageCode" mode="" class="code-img"></image>
						<view class="tishi">看不清？换一张</view>
					</view>
				</view>
				<view class="btnbox">
					<view class="left" @click="cancel">取消</view>
					<view class="right" @click="authorizedLog">确定</view>
				</view>
			</view>
		</u-popup>
		<uniModel :textmsg="textmsg" v-show="showTextmsg" @operation="operation"></uniModel>
		<u-modal v-model="modal" :title="title" :content="confirmContent" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
	import {
		getVerifyCodeApi,
		registerApiHelp,
		sendMsgApi,
		authorizedlogApi,
		getInviteCodeApi
	} from "@/api/uesr.js"
	import commjs from "@/common/verifyLogin.js"
		import uniModel from '../../compnents/unimodel.vue'
		import { baseURL } from "@/utils/req.js"
	export default {
		components: {
			uniModel
		},
		data() {
			return {
				confirmContent:'本平台为会员权益平台,合作机构包括工商银行、农业银行、建设银行、招商银行等，在广东省内拥有超过9家分公司。经过十几年的发展，商联支付已拥有成熟的技术团队，成型的业务模式，完备的认证机制.  个人账号和密码请妥善保护，避免丢失，造成资金损失;根据国家法律法规规定,提现等业务必须实名认证;使用虚假身份信息发现后冻结/停用账户并报送公安机关;您使用平台服务前，需要在平台创建账号并完善个人资料。平台确保客户信息不外漏。',
				title:"商联支付用户协议" ,
				modal:false,
				checked: true,
				inviteCode: '', //邀请码
				msgCode: '', //短信验证
				password: '', //密码
				phone: '', //手机号
				anew: false, //重新获取
				imageCode: '', //图形验证码
				countDownNum: 60, // 倒计时初始值
				QSPopup: false, //图形验证model框
				showTextmsg:false,
				textmsg: {
					title: '',
					content: '',
					confirm: ''
				},
				nickName:'',
				open_id:'',
				remarks:'',
				headimage:''
			};
		},
		onLoad(options) {
			console.log("member_id"+options.member_id)
			uni.setStorageSync('member_id', options.member_id)
			this.$forceUpdate();
			this.getInviteCode(options.member_id)
		},
		onShow() {
		},
		methods: {
			async getInviteCode(member_id){
				let params={
					member_id:member_id
				}
				uni.showLoading({
					title: '正在加载中....'
				})
				const res = await getInviteCodeApi(params)
				if(res.data.message=='success'){
					this.inviteCode=res.data.data
					this.$forceUpdate();
					uni.hideLoading()
				}else{
					uni.hideLoading()
					uni.showToast({
						title:res.data.message,
						icon: "none"
					})
				}
				
			},
			confirm(){
			this.modal=false
				
			},
			showAgree(){
				this.modal=true;
			},
			goLogin(){
				uni.redirectTo({
					url:"/pages/login/login"
				})
			},
			authorizedLog(){
				if(this.inviteCode !== ''){
					wx.login({
						success:(res)=>{
							var code = res.code;
							this.authlogin(code)
						}
					})
				}else{
					this.sendCode()
				}
			},
			async authlogin(code){
				let _this = this
				let params = {
					jsCode:code
				}
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await authorizedlogApi(params)
				if(res.statusCode === 200){
					uni.hideLoading()
					uni.setStorageSync('openId', res.data.data.openId)
					uni.setStorageSync('sessionKey', res.data.data.sessionKey)
					_this.sendCode()
				}
			},
			
			
			getUrl(url){
				var query = (url.indexOf('?') > 0) ? url.split('?')[1] : url;
				var vars = query.split("&");
				for (var i = 0; i < vars.length; i++) {
					var pair = vars[i].split("=");
					if (pair[0] == 'inviteCode') {
						this.inviteCode  = pair[1]
					}
				}
			},
			// radio切换
			changeRadio() {
				this.checked = !this.checked
			},
			//取消
			cancel() {
				this.QSPopup = false;
			},
			// 验证码倒计时
			getCode() {
				if (this.phone) {
					var regex = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
					var bool = regex.test(this.phone)
					if (bool) {
						this.QSPopup = true
						this.getVCode()
					} else {
						uni.showToast({
							title: "请输入正确的手机号",
							icon: "none"
						})
					}
				} else {
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					})
				}
			},
			// 获取图形验证码
			async getVCode() {
				uni.showLoading({
					title: "正在加载中...."
				})
				const res = await getVerifyCodeApi({})
				if (res.statusCode === 200) {
					uni.hideLoading()
					let imageBase64 = 'data:image/png;base64,' + wx.arrayBufferToBase64(res.data)
					this.imageCode = imageBase64
				} else {
					uni.showToast({
						title: '出错了，请重新获取',
						icon: "none"
					})
				}
			},
			// 发送验证码
			async sendCode(ref) {
				if (this.verifyCode === "") {
					uni.showToast({
						title: "请先输入图形验证码！",
						icon: "none"
					})
					return
				} else {
					let params = {
						phone: this.phone,
						verifyCode: this.verifyCode
					}
					uni.showLoading({
						title: '正在加载中....'
					})
					const res = await sendMsgApi(params)
					console.log(res, "res");
					if (res.statusCode == 200) {
						if(res.data.code=='201'){
							uni.hideLoading();
							uni.showToast({
								title: '操作过于频繁',
								icon: 'none'
							})
						}else{
							uni.hideLoading();
							this.getUserInfo();
							this.QSPopup = false;
							this.anew = true;
							this.countDown();
						}

					} else {
						uni.hideLoading();
					}
				}
			},
			getUserInfo() {
				uni.showModal({
					title: '温馨提示',
					content: '亲，授权微信登录后才能正常使用小程序功能',
					success(res) {
						console.log(0)
						console.log(res)
						//如果用户点击了确定按钮
						if (res.confirm) {
							uni.getUserProfile({
								desc: '获取你的昵称、头像、地区及性别',
								success: res => {
									// console.log(res.userInfo.nickName);
									// console.log(res.userInfo.avatarUrl);
									uni.setStorageSync("nickName", res.userInfo.nickName)
									uni.setStorageSync("avatarUrl", res.userInfo.avatarUrl)
								},
								fail: res => {
									//拒绝授权
									uni.showToast({
										title: '您拒绝了请求,不能正常使用小程序',
										icon: 'error',
										duration: 1500
									});
									return;
								}
							});
						} else if (res.cancel) {
							//如果用户点击了取消按钮
							// console.log(3);
							uni.showToast({
								title: '您拒绝了请求,不能正常使用小程序',
								icon: 'error',
								duration: 1500
							});
							return;
						}
					}
				});
			},
			// 倒计时
			countDown() {
				var _this = this;
				_this.anew = true
				var countDownNum = _this.countDownNum // 获取倒计时初始值
				var timer = setInterval(() => {
					countDownNum -= 1
					_this.countDownNum = countDownNum
					if (countDownNum <= -1) {
						clearInterval(timer)
						// 取消置顶的setInterval函数将要执行的代码
						_this.countDownNum = 60
						_this.anew = false
					}
				}, 1000)
			},
			//确认框
			operation(e) {
				let that = this
					that.showTextmsg = false	
					uni.navigateTo({
						url:'../advertisement/advertisement'
					})
			},
			// 注册
			async goRegister() {
				let _this= this
				if (this.checked) {
					if (this.phone === '') {
						uni.showToast({
							title: "请输入手机号",
							icon: "none"
						})
						return
					}
					if (this.msgCode === '') {
						uni.showToast({
							title: "请输入短信验证码",
							icon: "none"
						})
						return
					}
					if (this.password === '') {
						uni.showToast({
							title: "请输入注册密码",
							icon: "none"
						})
						return
					}
					if (this.inviteCode === '') {
						uni.showToast({
							title: "请输入邀请码",
							icon: "none"
						})
						return
					}
					if (this.phone !== '' && this.msgCode !== '' && this.password !== '' && this.inviteCode !== '') {
						this.open_id=uni.getStorageSync('openId');
						this.nickName=uni.getStorageSync('nickName');
						this.headimage=uni.getStorageSync('avatarUrl');
						let params = {
							phone: this.phone,
							msgCode: this.msgCode,
							inviteCode: this.inviteCode,
							password: this.password,
							nickName:this.nickName,
							openId: this.open_id,
							remark:this.remarks,
							headimage:this.headimage
						}
						uni.showLoading({
							title: "正在加载中...."
						})
						const res = await registerApiHelp(params)
						console.log(res,"zhuce ");
						
						if(res.data.code==201){
							uni.hideLoading()
							uni.showToast({
								title: res.data.message,
								icon: "none"
							})
						}else{
								uni.hideLoading()
							this.showTextmsg=true;
							this.textmsg.confirm='好的'
							this.textmsg.title=res.data.message
							uni.setStorageSync('role', res.data.data.role)
							uni.setStorageSync('member_id', res.data.data.id)
							uni.setStorageSync('isLogin', res.data.data.logged)
							uni.setStorageSync('sessionKey', res.data.data.sessionKey)
						}
						} 
					
				} else {
					uni.showToast({
						title: "请勾选用户协议",
						icon: "none"
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		margin-bottom: -150rpx;

		.head_tlt {
			width: 100%;
			height: 350rpx;
			line-height: 270rpx;
			padding-left: 55rpx;

			.tlt_blank,
			.tlt_gray {
				width: 100%;
				height: 80rpx;
				font-family: PingFang SC;
				font-weight: 500;
			}

			.tlt_blank {
				font-size: 48rpx;
				font-weight: 500;
				color: #000000;
			}

			.tlt_gray {
				font-size: 30rpx;
				color: #CCCCCC;
			}
		}

		.register_box {
			width: 100%;
			height: 985rpx;
			background: #FFFFFF;
			box-shadow: -1rpx -6rpx 12rpx 0rpx rgba(0, 0, 0, 0.03);
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.inp {
				width: 100%;
				height: 680rpx;
				padding: 69rpx 75rpx 0rpx 75rpx;
				box-sizing: border-box;

				.name,
				.pass {
					width: 95%;
					height: 80rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.08);
					border-radius: 10rpx;
				}

				.inp_idcode_box {
					width: 100%;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.code,
					.codeBtn {
						height: 80rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.08);
					}

					.code {
						width: 65%;
						border-radius: 10rpx 0rpx 0rpx 10rpx;
					}

					.codeBtn {
						width: 35%;
						border-radius: 0rpx 10rpx 10rpx 0rpx;
						text-align: center;
						line-height: 80rpx;
						font-size: 26rpx;
						font-weight: 500;
						color: #F05329;
						margin-top: 30rpx;
					}
				}
			}

			.register-btn {
				width: 100%;
				height: 88rpx;

				.btn {
					width: 80%;
					height: 100%;
					text-align: center;
					line-height: 88rpx;
					background: #F05329;
					border-radius: 10rpx;
					font-size: 38rpx;
					color: #FFFFFF;
				}
			}
			
			.txt_login{
				width: 100%;
				height: 130rpx;
				text-align: center;
				line-height: 130rpx;
				font-size: 30rpx;
				font-family: 500;
				color: #a8a8a8;
				.col{
					color: #F05329;
				}
			}

			.radio-btn {
				width: 100%;
				height: 80rpx;
				position: absolute;
				left: 15rpx;
				bottom: 40rpx;
			}
		}

		.codebox {
			width: 690rpx;
			height: 376rpx;
			margin: auto;
			background: #FFFFFF;
			border-radius: 20rpx;

			.tlt {
				width: 100%;
				height: 110rpx;
				text-align: center;
				line-height: 110rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.image-code {
				width: 100%;
				height: 130rpx;
				display: flex;
				padding-left: 30rpx;

				.input {
					font-size: 32rpx;
					color: #000;
					width: 350rpx;
					height: 70rpx;
					border: 1rpx solid #999999;
					border-radius: 10rpx;
					margin-right: 30rpx;
					padding-left: 20rpx;
				}

				.img {
					width: 270rpx;
					height: 100%;

					.code-img {
						width: 90%;
						height: 80upx;
					}

					.tishi {
						width: 90%;
						height: 40rpx;
						text-align: center;
						line-height: 40rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}
				}
			}

			.btnbox {
				width: 100%;
				height: 95rpx;
				margin-top: 23rpx;
				display: flex;
				border-top: 1rpx solid #999999;

				.right,
				.left {
					width: 50%;
					height: 100%;
					text-align: center;
					line-height: 95rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
				}

				.right {
					color: #F05329;
					border-left: 1rpx solid #999999;
				}

				.left {
					color: #999999;
				}
			}
		}
	}
</style>
